<template>
	<section class="jumbotron">
		<h3 class="jumbotron-heading">Search Github Users</h3>
		<div>
			<input
				type="text"
				placeholder="enter the name you search"
				v-model="keyword"
			/>&nbsp;
			<button @click="handleSearch">Search</button>
		</div>
	</section>
</template>

<script>
import axios from 'axios'
export default {
	name:'Search',
	data(){
		return {
			keyword:''
		}
	},
	methods: {
		handleSearch(){
			//请求前，通知List组件status变为1
			this.$bus.$emit('search-info',{userList:[],status:1,errMsg:''})
			//发送请求
			axios.get(`https://api.github.com/search/users?q=${this.keyword}`).then(
				//请求成功了
				response => {
					this.$bus.$emit('search-info',{
						userList:response.data.items,
						status:2,
						errMsg:''
					})
				},
				//请求失败了
				error => {
					this.$bus.$emit('search-info',{
						userList:[],
						status:3,
						errMsg:error
					})
				}
			)
		}
	},
}
</script>